<template>
    <!-- 房间管理，管理员 -->
    <div class="app-container">
        <!-- 搜索 -->
        <el-row type="flex" justify="end" style="margin-bottom: 20px">
            <el-col :span="2" style="margin-right: 10px">
                <el-select v-model="params.livingId" placeholder="请选择" @change="livingChanged">
                    <el-option
                        v-for="item in livingList"
                        :key="item.id"
                        :label="item.living"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-col>
            <el-col :span="2" style="margin-right: 10px">
                <el-select v-model="params.buildingId" placeholder="请选择">
                    <el-option
                        v-for="item in buildList"
                        :key="item.id"
                        :label="item.building"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-col>
            <!-- 根据区域搜索 -->
            <el-col :span="2" style="margin-right: 10px">
                <el-input
                    v-model.trim="params.room"
                    placeholder="请输入宿舍号"
                    clearable
                    @clear="getRoom"
                ></el-input>
            </el-col>
            <!-- 搜索重置按钮 -->
            <el-button type="primary" @click="getRoom" icon="el-icon-search"></el-button>
            <el-button type="primary" @click="reset">重置</el-button>
        </el-row>
        <!-- 表格展示 -->
        <el-table :data="tableData" v-loading="loading" stripe border>
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column prop="living" label="生活区"></el-table-column>
            <el-table-column prop="building" label="楼栋"></el-table-column>
            <el-table-column prop="room" label="寝室号"></el-table-column>
            <el-table-column prop="currentNumber" label="已入住人数"></el-table-column>
            <el-table-column prop="totalNumber" label="可容纳人数"></el-table-column>
            <!-- 操作按钮 -->
            <el-table-column label="操作" width="250">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog :visible.sync="editDialog">
            <el-form :model="editForm">
                <el-form-item label="可容纳人数">
                    <el-input v-model="editForm.totalNumber" placeholder="请输入可容纳人数，例：4"></el-input>
                </el-form-item>
                <el-row>
                    <el-col style="display: flex; justify-content: center;margin-top: 40px;">
                        <el-form-item>
                            <el-button type="primary" @click="editSubmitForm()">提交</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-dialog>

        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.pageCurrent"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="params.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
        ></el-pagination>
    </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getRoom, deleteRoom, updateRoom } from "@/api/room";
import { getLiving } from "@/api/living"
import { getBuilding } from "@/api/building"
export default {
    data() {
        return {
            tableData: [],
            loading: false,
            living: {},
            livingList: [],
            buildList: [],
            editDialog: false,
            // 表格总条数
            total: 0,
            params: {
                livingId: "",
                buildingId: "",
                room: "",
                status: "",
                currentNumber: "",
                pageCurrent: 1,
                pageSize: 10,
            },
            // 编辑表单
            editForm: {
                buildingId: "",
                totalNumber: null,
                id: "",
                room: ""
            }
        }
    },
    created() {
        this.getRoom();
        this.getLiving()
    },
    computed: {
        ...mapGetters(["username"]),
    },
    methods: {
        // 分页
        // 监听页码变化
        handleCurrentChange(newPage) {
            this.params.pageCurrent = newPage
            this.getRoom()
        },
        // 监听size变化
        handleSizeChange(newSize) {
            this.params.pageSize = newSize
            this.getRoom()
        },
        // 获取生活区
        getLiving() {
            getLiving(this.living).then((res) => {
                this.livingList = res.data.records
            })
        },
        // 生活区改变后
        livingChanged() {
            getBuilding({ livingId: this.params.livingId }).then((res) => {
                this.buildList = res.data.records
            })
        },
        // 房间数据
        getRoom() {
            getRoom({
                username: this.username,
                pageSize: this.params.pageSize,
                pageCurrent: this.params.pageCurrent,
                livingId: this.params.livingId,
                buildingId: this.params.buildingId,
                room: this.params.room,
                status: this.params.status,
            }).then((res) => {
                if (res.code === "200") {
                    this.loading = true
                    setTimeout(() => {
                        this.tableData = res.data.records;
                        this.total = Number(res.data.total)
                        this.loading = false
                        console.log(res);
                    }, 200)
                }
            });
        },
        // 删除
        async handleDelete(index, row) {
            const confirm = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch((err) => err)
            if (confirm !== 'confirm') {
                return this.$message.info("已取消删除")
            }
            // 确定删除
            deleteRoom(row.id).then((res) => {
                if (res.code !== "200") {
                    this.$message.error("删除失败")
                } else {
                    this.$message.success("删除成功")
                    this.getRoom();
                }
            })
        },
        // 编辑房间
        handleEdit(index, row) {
            this.editDialog = true
            this.editForm.buildingId = JSON.parse(JSON.stringify(row.buildingId))
            this.editForm.id = JSON.parse(JSON.stringify(row.id))
            this.editForm.room = JSON.parse(JSON.stringify(row.room))
            
        },
        editSubmitForm(){
            updateRoom(this.editForm).then((res)=>{
                if(res.code === "200"){
                    this.editDialog = false
                    this.getRoom();
                    this.$message.success(res.msg)
                }
            })
        },


        // 搜索重置按钮
        async reset() {
            this.params.livingId = ""
            this.params.buildingId = ""
            await getRoom({username:this.username}).then((res) => {
                this.loading = true;
                setTimeout(() => {
                    this.tableData = res.data.records;
                    this.loading = false;
                }, 200);
            });
        },
    },
}
</script>